import 'package:flutter/material.dart';

class ContactsPage extends StatefulWidget {
  const ContactsPage({Key? key}) : super(key: key);

  @override
  State<ContactsPage> createState() => _ContactsPageState();
}

class _ContactsPageState extends State<ContactsPage> {
  String _currentLetter = 'A';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF2F2F2),
      appBar: AppBar(
        backgroundColor: Colors.white,
        elevation: 0,
        title: const Text(
          '通讯录',
          style: TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
        ),
        centerTitle: true,
        actions: [
          IconButton(
            icon: const Icon(Icons.search, color: Colors.black),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(Icons.person_add, color: Colors.black),
            onPressed: () {},
          ),
        ],
      ),
      body: Stack(
        children: [
          // 主列表
          ListView(
            children: [
              // 新的朋友
              _buildContactItem(
                icon: Icons.person_add_alt,
                title: '新的朋友',
                iconColor: Colors.white,
                iconBgColor: Colors.orange,
              ),
              const Divider(height: 1, indent: 70),

              // 仅聊天的朋友
              _buildContactItem(
                icon: Icons.person_outline,
                title: '仅聊天的朋友',
                iconColor: Colors.white,
                iconBgColor: Colors.orange,
              ),
              const Divider(height: 1, indent: 70),

              // 群聊
              _buildContactItem(
                icon: Icons.people_alt_outlined,
                title: '群聊',
                iconColor: Colors.white,
                iconBgColor: Colors.green,
              ),
              const Divider(height: 1, indent: 70),

              // 标签
              _buildContactItem(
                icon: Icons.local_offer_outlined,
                title: '标签',
                iconColor: Colors.white,
                iconBgColor: Colors.blue,
              ),
              const Divider(height: 1, indent: 70),

              // 公众号
              _buildContactItem(
                icon: Icons.article_outlined,
                title: '公众号',
                iconColor: Colors.white,
                iconBgColor: Colors.blue.shade600,
              ),
              const Divider(height: 1, indent: 70),

              // 服务号
              _buildContactItem(
                icon: Icons.miscellaneous_services_outlined,
                title: '服务号',
                iconColor: Colors.white,
                iconBgColor: Colors.redAccent,
              ),

              // 分隔标题
              Container(
                padding:
                    const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                color: const Color(0xFFF2F2F2),
                alignment: Alignment.centerLeft,
                child: const Text(
                  '我的企业及企业联系人',
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 14,
                  ),
                ),
              ),

              // 企业微信联系人
              _buildContactItem(
                icon: Icons.business_center_outlined,
                title: '企业微信联系人',
                iconColor: Colors.white,
                iconBgColor: Colors.blue.shade600,
              ),
              const Divider(height: 1, indent: 70),

              // 金陵科技学院
              _buildContactItem(
                icon: Icons.school_outlined,
                title: '金陵科技学院',
                iconColor: Colors.white,
                iconBgColor: Colors.blue.shade600,
                trailing: Container(
                  width: 16,
                  height: 16,
                  decoration: const BoxDecoration(
                    color: Colors.amber,
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(
                    Icons.star,
                    size: 12,
                    color: Colors.white,
                  ),
                ),
              ),
              const Divider(height: 1, indent: 70),

              // 企业微信通知
              _buildContactItem(
                icon: Icons.notifications_outlined,
                title: '企业微信通知',
                iconColor: Colors.white,
                iconBgColor: Colors.blue.shade600,
              ),

              // 字母分隔标题
              _buildLetterHeader('A'),

              // A开头的联系人
              _buildContactItem(
                avatar: 'https://via.placeholder.com/50',
                title: 'A',
                showAvatar: true,
              ),
              const Divider(height: 1, indent: 70),

              // AAA家政哥
              _buildContactItem(
                avatar: 'https://via.placeholder.com/50',
                title: 'AAA家政哥 开锁换锁 维修 通下水道',
                showAvatar: true,
              ),
              const Divider(height: 1, indent: 70),

              // A叮咙团餐-林帅
              _buildContactItem(
                avatar: 'https://via.placeholder.com/50',
                title: 'A叮咙团餐-林帅',
                showAvatar: true,
              ),
            ],
          ),

          // 右侧字母索引
          Positioned(
            right: 0,
            top: 0,
            bottom: 0,
            width: 24,
            child: Container(
              color: Colors.transparent,
              child: ListView(
                physics: const NeverScrollableScrollPhysics(),
                children: [
                  const SizedBox(height: 80), // 顶部留白
                  _buildIndexItem('↑'),
                  _buildIndexItem('★'),
                  _buildIndexItem('A', isHighlighted: _currentLetter == 'A'),
                  _buildIndexItem('B', isHighlighted: _currentLetter == 'B'),
                  _buildIndexItem('C', isHighlighted: _currentLetter == 'C'),
                  _buildIndexItem('D', isHighlighted: _currentLetter == 'D'),
                  _buildIndexItem('E', isHighlighted: _currentLetter == 'E'),
                  _buildIndexItem('F', isHighlighted: _currentLetter == 'F'),
                  _buildIndexItem('G', isHighlighted: _currentLetter == 'G'),
                  _buildIndexItem('H', isHighlighted: _currentLetter == 'H'),
                  _buildIndexItem('I', isHighlighted: _currentLetter == 'I'),
                  _buildIndexItem('J', isHighlighted: _currentLetter == 'J'),
                  _buildIndexItem('K', isHighlighted: _currentLetter == 'K'),
                  _buildIndexItem('L', isHighlighted: _currentLetter == 'L'),
                  _buildIndexItem('M', isHighlighted: _currentLetter == 'M'),
                  _buildIndexItem('N', isHighlighted: _currentLetter == 'N'),
                  _buildIndexItem('O', isHighlighted: _currentLetter == 'O'),
                  _buildIndexItem('P', isHighlighted: _currentLetter == 'P'),
                  _buildIndexItem('Q', isHighlighted: _currentLetter == 'Q'),
                  _buildIndexItem('R', isHighlighted: _currentLetter == 'R'),
                  _buildIndexItem('S', isHighlighted: _currentLetter == 'S'),
                  _buildIndexItem('T', isHighlighted: _currentLetter == 'T'),
                  _buildIndexItem('U', isHighlighted: _currentLetter == 'U'),
                  _buildIndexItem('V', isHighlighted: _currentLetter == 'V'),
                  _buildIndexItem('W', isHighlighted: _currentLetter == 'W'),
                  _buildIndexItem('X', isHighlighted: _currentLetter == 'X'),
                  _buildIndexItem('Y', isHighlighted: _currentLetter == 'Y'),
                  _buildIndexItem('Z', isHighlighted: _currentLetter == 'Z'),
                  _buildIndexItem('#', isHighlighted: _currentLetter == '#'),
                ],
              ),
            ),
          ),

          // 当前选中的字母提示
          if (_currentLetter.isNotEmpty)
            Center(
              child: Container(
                width: 80,
                height: 80,
                decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Center(
                  child: Text(
                    _currentLetter,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
        ],
      ),
      // bottomNavigationBar: BottomNavigationBar(
      //   type: BottomNavigationBarType.fixed,
      //   currentIndex: 1,
      //   selectedItemColor: Colors.green,
      //   unselectedItemColor: Colors.black,
      //   items: [
      //     BottomNavigationBarItem(
      //       icon: Stack(
      //         children: [
      //           const Icon(Icons.chat_bubble_outline),
      //           Positioned(
      //             right: 0,
      //             top: 0,
      //             child: Container(
      //               padding: const EdgeInsets.all(1),
      //               decoration: BoxDecoration(
      //                 color: Colors.red,
      //                 borderRadius: BorderRadius.circular(6),
      //               ),
      //               constraints: const BoxConstraints(
      //                 minWidth: 12,
      //                 minHeight: 12,
      //               ),
      //               child: const Text(
      //                 '4',
      //                 style: TextStyle(
      //                   color: Colors.white,
      //                   fontSize: 8,
      //                 ),
      //                 textAlign: TextAlign.center,
      //               ),
      //             ),
      //           ),
      //         ],
      //       ),
      //       label: '微信',
      //     ),
      //     const BottomNavigationBarItem(
      //       icon: Icon(Icons.person_outline),
      //       label: '通讯录',
      //     ),
      //     const BottomNavigationBarItem(
      //       icon: Icon(Icons.explore_outlined),
      //       label: '发现',
      //     ),
      //     const BottomNavigationBarItem(
      //       icon: Icon(Icons.person),
      //       label: '我',
      //     ),
      //   ],
      //   onTap: (index) {
      //     // 在实际应用中，这里应该处理页面导航
      //   },
      // ),
    );
  }

  Widget _buildLetterHeader(String letter) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      color: const Color(0xFFF2F2F2),
      alignment: Alignment.centerLeft,
      child: Text(
        letter,
        style: const TextStyle(
          color: Colors.grey,
          fontSize: 14,
        ),
      ),
    );
  }

  Widget _buildContactItem({
    IconData? icon,
    String? avatar,
    required String title,
    Color iconColor = Colors.blue,
    Color iconBgColor = Colors.blue,
    bool showAvatar = false,
    Widget? trailing,
  }) {
    return InkWell(
      onTap: () {
        // 在实际应用中，这里应该处理点击联系人的逻辑
      },
      child: Container(
        color: Colors.white,
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
        child: Row(
          children: [
            showAvatar
                ? ClipRRect(
                    borderRadius: BorderRadius.circular(4),
                    child: Image.network(
                      avatar ?? 'https://via.placeholder.com/50',
                      width: 40,
                      height: 40,
                      fit: BoxFit.cover,
                      errorBuilder: (context, error, stackTrace) {
                        return Container(
                          width: 40,
                          height: 40,
                          color: Colors.grey.shade300,
                          child: const Icon(Icons.person, color: Colors.white),
                        );
                      },
                    ),
                  )
                : Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: iconBgColor,
                      borderRadius: BorderRadius.circular(4),
                    ),
                    child: Icon(icon, color: iconColor, size: 20),
                  ),
            const SizedBox(width: 14),
            Expanded(
              child: Text(
                title,
                style: const TextStyle(fontSize: 16),
                overflow: TextOverflow.ellipsis,
              ),
            ),
            if (trailing != null) trailing,
          ],
        ),
      ),
    );
  }

  Widget _buildIndexItem(String letter, {bool isHighlighted = false}) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _currentLetter = letter;
          // 在实际应用中，这里应该滚动到对应的字母分组
        });

        // 显示字母提示后，1秒后隐藏
        Future.delayed(const Duration(milliseconds: 1000), () {
          if (mounted) {
            setState(() {
              _currentLetter = '';
            });
          }
        });
      },
      child: SizedBox(
        height: 16,
        child: Center(
          child: Text(
            letter,
            style: TextStyle(
              fontSize: 10,
              fontWeight: isHighlighted ? FontWeight.bold : FontWeight.normal,
              color: isHighlighted ? Colors.green : Colors.black54,
            ),
          ),
        ),
      ),
    );
  }
}
